<template>
  <div class="page">
    <canvas id="myCanvas" width="400" height="400">
      您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
  </div>
</template>
<script>
export default {
  name: 'CanvasStudy',
  data() {
    return {
      ctx: null
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      let c = document.querySelector('#myCanvas')
      // 获取画布的上下文
      this.ctx = c.getContext('2d')
      this.drawLine(10, 10, 10, 150)
      this.drawLine(10, 10, 150, 10)
      this.drawLine(150, 10, 150, 150)

      this.ctx.shadowOffsetX = 4
      this.ctx.shadowOffsetY = 4
      this.ctx.shadowBlur = 4
      this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'

      this.ctx.font = '30px Times New Roman'
      this.ctx.fillStyle = 'black'
      this.ctx.fillText('西伯利亚狼', 5, 330)
    },
    drawLine(x, y, x1, y1) {
      // 开启路径
      this.ctx.beginPath()
      // 确定起始点
      this.ctx.moveTo(x, y)
      // 确定结束点
      this.ctx.lineTo(x1, y1)
      // 设置线的颜色
      this.ctx.strokeStyle = 'green'
      // 设置线宽
      this.ctx.lineWidth = 12
      // 着色
      this.ctx.stroke()
      // 结束路径
      this.ctx.closePath()
    }
  }
}
</script>
<style lang="scss" scoped>
#myCanvas {
  border: 1px solid #d3d3d3;
}
</style>
